<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>全部评论</title>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <!--以显示网页的屏幕宽度定义了视窗宽度。网页的比例和最大比例被设置为100%-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" href="asset/plugins/weui/css/weui.min.css">
    <link rel="stylesheet" href="asset/plugins/jquery-weui/css/jquery-weui.min.css">
    <link rel="stylesheet" href="asset/plugins/iconfont/iconfont.css">
    <link rel="stylesheet" href="asset/plugins/mescroll/mescroll.min.css">

    <link rel="stylesheet" href="asset/css/p-index.css">
</head>
<body>
<!--内容 开始-->
    <section id="container" class="m-container">
        <div class="weui-panel weui-panel_access weui-panel--comment mescroll" id="js-comment-list">
            <div class="weui-panel__hd"><span>用户评论</span><a class="m-panel__hd_link" href="javascript:;" onclick="history.go(-1)"><span>返回</span><i class="iconfont icon-return"></i></a></div>
            <div id="js-comment-list_inner" class="weui-panel__bd">
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <!--<p class="g-fs&#45;&#45;12 g-mt&#45;&#45;10 g-c&#45;&#45;gray">2017.06.13 14:00</p>-->
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <!--<p class="g-fs&#45;&#45;12 g-mt&#45;&#45;10 g-c&#45;&#45;gray">2017.06.13 14:00</p>-->
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/avatar/a9.jpg" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title m-comment_name">用户名：</h4>
                        <p class="weui-media-box__desc">服务很专业，服务很专业，服务很专业！服务很专业！</p>
                        <!--<p class="g-fs&#45;&#45;12 g-mt&#45;&#45;10 g-c&#45;&#45;gray">2017.06.13 14:00</p>-->
                        <ul class="weui-media-box__info">
                            <li class="weui-media-box__info__meta">2017.06.22 13:11</li>
                        </ul>
                    </div>
                    <div class="m-icon-grade p-icon-grade"><img src="asset/images/icon-global/9fen1.png" alt=""></div>
                </div>
            </div>

        </div>

        <!--<div class="m-container_footer"><a href="javascript:;" onclick="history.go(-1)" class="weui-btn weui-btn_orange">返回上一页</a></div>-->
    </section>


<script src="asset/plugins/jquery/jquery-2.1.4.js"></script>
<script src="asset/plugins/jquery-weui/js/jquery-weui.min.js"></script>
<script src="asset/plugins/mescroll/mescroll.min.js"></script>
<!--p-index.js-->
<!--<script src="asset/js/p-waiter-info.js"></script>-->
<!--<script src="asset/js/m-draw-bar.js"></script>-->
<!--<script src="asset/js/m-grade-stars.js"></script>-->
<script>
$(function () {
    /*联网加载列表数据*/
    function getListDataFromNet(json,pageNum, pageSize, successCallback, errorCallback) {
        $.ajax({
            type: 'GET',
//                    url: 'asset/data/data-index_shop-first.json',
            url: json+'?num=' + pageNum + "&size=" + pageSize,
            dataType: 'json',
            success: function (data) {
                //模拟分页数据
                var listData = [];
                for (var i = (pageNum - 1) * pageSize; i < pageNum * pageSize; i++) {
                    if (i == data.length) break;
                    listData.push(data[i]);
                }
                console.log(listData);
                successCallback(listData);
            },
            error: errorCallback
        });
    }
    var mescroll = new MeScroll("js-comment-list", { //第一个参数"mescroll"对应上面布局结构div的id
        up: {
            clearEmptyId: "js-comment-list_inner", //1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
            page:{size:2},
            loadFull:{
                use:true
            },
            callback: getListData //上拉加载回调,简写callback:function(page){upCallback(page);}
        }
    });

    function getListData(page) {
        //联网加载数据
        var json="asset/data/data-grade-all.json";
        console.log("page.num-list="+page.num);
        getListDataFromNet(json,page.num, page.size, function (data) {
            //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
            mescroll.endSuccess(data.length);//传参:数据的总数; mescroll会自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
            //设置列表数据,因为配置了emptyClearId,第一页会清空dataList的数据,所以setListData应该写在最后;
            setListData(data);
        }, function () {
            //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
            mescroll.endErr();
        });
    }

    /*设置列表数据*/
    function setListData(data) {
        var listDom = document.getElementById("js-comment-list_inner");

        for (var i = 0; i < data.length; i++) {
            var pd = data[i];
            var html_add = `<div class="weui-media-box weui-media-box_appmsg">
                                <div class="weui-media-box__hd"><img src="${pd.img_src}" alt="" class="weui-media-box__thumb g-img-circle g-img-bordered"></div>
                                <div class="weui-media-box__bd">
                                    <h4 class="weui-media-box__title m-comment_name">${pd.name}：</h4>
                                    <p class="weui-media-box__desc">${pd.comment}</p>
                                    <ul class="weui-media-box__info">
                                        <li class="weui-media-box__info__meta">${pd.data}</li>
                                    </ul>
                                </div>
                                <div class="m-icon-grade p-icon-grade"><img src="${pd.img_grade}" alt=""></div>
                            </div>`;
            $(listDom).append(html_add);
        }
    }
});


</script>
</body>
</html>